<template>
  <view id="LargeDataScreen">
    <header>
      <image src="@/static/img/largeScreen/title-txt.png" />
      <view id="top">可视化数据大屏</view>
      <view class="time">
        <view class="h_s">{{ time }}</view>
        <view class="day">
          <p>{{ week }}</p>
          <p>{{ day }}</p>
        </view>
      </view>
    </header>
    <main>
      <view id="upper">
        <view class="left item">
          <!-- 库房概况 -->
          <view class="storeroom_probably">
            <view class="title">
              <zk-bgtitle :msg="'库房概况'"></zk-bgtitle>
            </view>
            <view class="item_body">
              <!-- 环境 -->
              <view class="environment">
                <view class="environment_item">
                  <image
                    src="@/static/img/largeScreen/temperature.png"
                    alt="" />
                  <view class="info">
                    <p>
                      {{ temperature.value || "--" }}
                    </p>
                    <span>
                      {{ temperature.name || "--" }}
                    </span>
                  </view>
                </view>
                <view class="environment_item">
                  <image src="@/static/img/largeScreen/humidity.png" alt="" />
                  <view class="info">
                    <p>
                      {{ humidness.value || "--" }}
                    </p>
                    <span>
                      {{ humidness.name || "--" }}
                    </span>
                  </view>
                </view>
              </view>
              <!--  库房 -->
              <view class="storeroom">
                <view class="storeroom_item">
                  <image src="@/static/img/largeScreen/inventory.png" />
                  <view class="info">
                    <view class="titile">实时库存数</view>
                    <view class="data">
                      {{ Inventorynumber.value || "--" }}
                      <span style="font-size: 1.2px">/件</span>
                    </view>
                  </view>
                </view>
                <view class="storeroom_item">
                  <image src="@/static/img/largeScreen/area.png" />
                  <view class="info">
                    <view class="titile">占地面积</view>
                    <view class="data">
                      {{ WarehouseArea.value || "--" }}
                      <span style="font-size: 1.2px">/M²</span>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="center item">
          <!-- 库存走势 -->
          <view class="Inventory">
            <view class="bg"></view>
            <view class="sp_box">
              <view class="item">
                <view class="msg">
                  <p>{{ OutStoragequantity.value || "0" }}</p>
                  <span>当日出库量</span>
                </view>
                <image src="@/static/img/largeScreen/Out.png" />
                <image
                  class="bg"
                  src="@/static/img/largeScreen/center-t-con-bg.png" />
              </view>
              <view class="item">
                <view class="msg">
                  <p>{{ PutStoragequantity.value || "0" }}</p>
                  <span>当日入库量</span>
                </view>
                <image src="@/static/img/largeScreen/Put.png" />
                <image
                  class="bg"
                  src="@/static/img/largeScreen/center-t-con-bg.png" />
              </view>
              <view class="item">
                <view class="msg">
                  <p>{{ lendNumber.value || "0" }}</p>
                  <span>当日借调量</span>
                </view>
                <image src="@/static/img/largeScreen/loan.png" />
                <image
                  class="bg"
                  src="@/static/img/largeScreen/center-t-con-bg.png" />
              </view>
              <view class="item">
                <view class="msg">
                  <p>{{ damageNumber.value || "0" }}</p>
                  <span>当日报损量</span>
                </view>
                <image src="@/static/img/largeScreen/Report.png" />
                <image
                  class="bg"
                  src="@/static/img/largeScreen/center-t-con-bg.png" />
              </view>
            </view>
          </view>
        </view>
        <view class="right item">
          <!-- 预警信息 -->
          <view class="scrollBox forewarning">
            <view class="title">
              <zk-bgtitle :msg="'预警信息'"></zk-bgtitle>
            </view>
            <view class="table_list">
              <view class="list_title list_box">
                <view>序号</view>
                <view>处理人员</view>
                <view>预警时间</view>
                <view>预警类型</view>
              </view>
              <swiper
                class="swiper"
                circular
                :vertical="true"
                :autoplay="forewarningMsg.length > 4 ? true : false"
                :interval="2000"
                :duration="2000">
                <swiper-item v-for="i in 3" :key="i">
                  <view class="box">
                    <view
                      v-for="(item, index) in forewarningMsg"
                      :key="item.id"
                      class="list_box">
                      <view class="list_item num">
                        {{ index + 1 }}
                      </view>
                      <view class="list_item text_overflow">
                        {{ item.AddressName }}
                      </view>
                      <view class="list_item num">
                        {{ item.SendTime }}
                      </view>
                      <view
                        class="list_item"
                        :style="{
                          color:
                            item.MsgType == 'MsgStockExceeded'
                              ? '#ffc939'
                              : item.MsgType == 'MsgStockOut'
                              ? '#ff8261'
                              : '#00f4f7',
                        }">
                        {{ item.MsgTypeName }}
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
      </view>
      <view id="center">
        <view class="left item">
          <!-- 库存数量 -->
          <view class="scrollBox ItemQuantity">
            <view class="title">
              <zk-bgtitle :msg="'库存数量'"></zk-bgtitle>
            </view>
            <view class="table_list">
              <view class="list_title list_box">
                <view>物资名称</view>
                <view>库存数量</view>
                <view>可用数量</view>
              </view>
              <!--ItemQuantityData.length > 6 ? true : false  -->
              <swiper
                class="swiper"
                circular
                :vertical="true"
                :autoplay="ItemQuantityData.length > 6 ? true : false"
                :interval="2000"
                :duration="2000">
                <swiper-item v-for="i in 3" :key="i">
                  <view class="box">
                    <view
                      v-for="item in ItemQuantityData"
                      :key="item.id"
                      class="list_box">
                      <view class="list_item text_overflow">
                        {{ item.GoodsName }}
                      </view>
                      <view class="list_item num">
                        {{ item.GoodsNumber }}
                      </view>
                      <view class="list_item num">
                        {{ item.RealyNumber }}
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
        <view class="center item">
          <!-- 物品待还 -->
          <view class="scrollBox GoodsReturned">
            <view class="title">
              <zk-bgtitle :msg="'物品待还'"></zk-bgtitle>
            </view>
            <view class="table_list">
              <view class="list_title list_box">
                <view>物资名称</view>
                <view>借出数量</view>
                <view>借出时间</view>
              </view>
              <swiper
                class="swiper"
                circular
                :vertical="true"
                :autoplay="GoodsReturnedData.length > 5 ? true : false"
                :interval="2000"
                :duration="2000">
                <swiper-item v-for="i in 3" :key="i">
                  <view class="box">
                    <view
                      v-for="item in GoodsReturnedData"
                      :key="item.id"
                      class="list_box">
                      <view class="list_item text_overflow">
                        {{ item.GoodsName }}
                      </view>
                      <view class="list_item num">
                        {{ item.RealyNumber || "--" }}
                      </view>
                      <view class="list_item num">
                        {{ item.RegisterDate }}
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
        <view class="right item">
          <!-- 信息通知 -->
          <view class="scrollBox InfoNotification">
            <view class="title">
              <zk-bgtitle :msg="'信息通知'"></zk-bgtitle>
            </view>
            <view class="table_list">
              <view class="list_title list_box">
                <view>发布人</view>
                <view>标题</view>
                <view>时间</view>
              </view>
              <swiper
                class="swiper"
                circular
                :vertical="true"
                :autoplay="InfoNotificationData.length > 5 ? true : false"
                :interval="2000"
                :duration="2000">
                <swiper-item v-for="i in 3" :key="i">
                  <view class="box">
                    <view
                      v-for="item in InfoNotificationData"
                      :key="item.id"
                      class="list_box">
                      <view class="list_item text_overflow">
                        {{ item.Releaser }}
                      </view>
                      <view class="list_item text_overflow">
                        {{ item.Title }}
                      </view>
                      <view class="list_item num">
                        {{ item.AddTime }}
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
      </view>
      <view id="bottom">
        <view class="left item">
          <view class="title">
            <zk-bgtitle :msg="'仓库出/入库统计'"></zk-bgtitle>
          </view>
          <view class="charts-box">
            <qiun-data-charts
              type="area"
              :opts="Out_Put_opts"
              :chartData="Out_Put_chartData" />
          </view>
        </view>
        <view class="right item">
          <view class="title">
            <zk-bgtitle :msg="'仓库借调/报损统计'"></zk-bgtitle>
          </view>
          <view class="charts-box">
            <qiun-data-charts
              type="column"
              :opts="Reportdamage_opts"
              :chartData="Reportdamage_chartData" />
          </view>
        </view>
      </view>
    </main>
  </view>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { dataScreenList } from "@/utils/api/user/userApi";
const day: any = ref("");
const time: any = ref("");
const week: any = ref("");
const forewarningMsg: any = ref([]); //预警信息数据
const ItemQuantityData: any = ref([]); //物品数量数据
const GoodsReturnedData: any = ref([]); //物品待还数据
const InfoNotificationData: any = ref([]); //信息通知数据
const temperature = ref({ value: "", name: "" }); //环境数据
const humidness = ref({ value: "", name: "" }); //环境数据
const Inventorynumber = ref({ value: "", name: "" }); //库存数据
const WarehouseArea = ref({ value: "", name: "" }); //库房数据
const OutStoragequantity = ref({ value: "", name: "" }); //出库数据
const PutStoragequantity = ref({ value: "", name: "" }); //入库数据
const lendNumber = ref({ value: "", name: "" }); //借调数据
const damageNumber = ref({ value: "", name: "" }); //报损数据
//出/入库统计数据
const Out_Put_opts: any = reactive({
  color: ["#fffc61", "#39ffdc"],
  padding: [15, 15, 0, 15],
  enableScroll: false,
  legend: {
    position: "top",
    float: "right",
  },
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
  },
  extra: {
    area: {
      type: "curve",
      opacity: 0.2,
      addLine: true,
      width: 1,
      gradient: true,
      activeType: "hollow",
    },
  },
});
const Out_Put_chartData = ref(null);
let Out_Put_options: any = reactive({
  categories: [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ],
  series: [
    {
      name: "出库",
      data: [],
    },
    {
      name: "入库",
      data: [],
    },
  ],
});
//借调/报损统计数据
const Reportdamage_opts: any = reactive({
  color: ["#39ffdc", "#e38268"],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {
    position: "top",
    float: "right",
  },
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: "group",
      width: 10,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
    },
  },
});
let Reportdamage_options: any = reactive({
  categories: [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ],
  series: [
    {
      name: "借调",
      data: [],
    },
    {
      name: "报损",
      data: [],
    },
  ],
});
const Reportdamage_chartData = ref(null);
let timer: any = ref(null);
onMounted(() => {
  timer = setInterval(() => {
    getScreenData();
    console.log("定时器执行");
    console.log(day.value, time.value, week.value);
  }, 180000);

  getScreenData();
  setInterval(() => {
    getData();
  }, 1000);
});
//页面离开时清除定时器
onDeactivated(() => {
  clearInterval(timer);
});
//获取当前时间
const getData = async () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const dayNum = date.getDate();
  const dayStr = dayNum < 10 ? `0${dayNum}` : dayNum;
  const monthStr = month < 10 ? `0${month}` : month;
  const timeStr = `${year}-${monthStr}-${dayStr}`;
  //时 getHours()：(0 ~ 23)
  var hour = date.getHours();
  //分 getMinutes()： (0 ~ 59)
  var minute = date.getMinutes();
  //秒 getSeconds()：(0 ~ 59)
  var second = date.getSeconds();
  const addZero = (s: any) => {
    return s < 10 ? "0" + s : s;
  };
  const weekArr = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const weekNum = date.getDay();
  const weekStr = weekArr[weekNum];
  day.value = timeStr;
  time.value = addZero(hour) + ":" + addZero(minute) + ":" + addZero(second);
  week.value = weekStr;
};

//获取数据大屏列表
const getScreenData = async () => {
  forewarningMsg.value = []; //预警信息数据
  ItemQuantityData.value = []; //物品数量数据
  GoodsReturnedData.value = []; //物品待还数据
  InfoNotificationData.value = []; //信息通知数据
  let res = await dataScreenList({});
  if (res.code == 0) {
    let data = res.data;
    handleData(data.data1); //库房概况数据
    forewarningMsg.value = data.data8; //预警信息数据
    ItemQuantityData.value = data.data2; //物品数量数据
    GoodsReturnedData.value = data.data10; //物品待还数据
    InfoNotificationData.value = data.data9; //信息通知数据
    Out_Put_options.series[0].data = data.data5 || []; //出库数据
    Out_Put_options.series[1].data = data.data4 || []; //入库数据
    Reportdamage_options.series[1].data = data.data6 || []; //借调数据
    Reportdamage_options.series[0].data = data.data7 || []; //报损数据
    Out_Put_chartData.value = Out_Put_options;
    Reportdamage_chartData.value = Reportdamage_options;
  }
};
//库房概况数据
const handleData = (data = []) => {
  if (data.length != 0) {
    data.forEach((item: any) => {
      switch (item.id) {
        case "p1":
          temperature.value = item; //温度
          break;
        case "p2":
          humidness.value = item; //湿度数据
          break;
        case "p5":
          Inventorynumber.value = item; //库存量数据
          break;
        case "p4":
          WarehouseArea.value = item; //面积数据
          break;
        case "p7":
          OutStoragequantity.value = item; //出库量
          break;
        case "p8":
          PutStoragequantity.value = item; //入库量
          break;
        case "p9":
          lendNumber.value = item; //借出量
          break;
        case "p11":
          damageNumber.value = item; //报损量
          break;
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.text_overflow {
  overflow: hidden;
  // white-space: nowrap;
  text-overflow: ellipsis;
  /*溢出隐藏*/
  display: -webkit-box;
  /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
  -webkit-line-clamp: 1;
  line-clamp: 1;
  /*用来限制在一个块元素显示的文本的行数。*/
  -webkit-box-orient: vertical;
  /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
}

#LargeDataScreen {
  height: 100%;
  width: 100%;
  color: #fff !important;
  user-select: none;
}

header {
  height: 6%;
  position: relative;
  background-size: 100%;

  image {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  #top {
    // background: url('@/static/img/largeScreen/标题.png') no-repeat;
    /* 让背景图基于容器大小伸缩 */
    // background-size: cover;
    text-align: center;
    justify-content: space-around;
    display: flex;
    align-items: center;
    font-family: PangMenZhengDao;
    font-size: 30px;
    height: 100%;
    color: #ffffff;
    position: relative;
  }

  .time {
    position: absolute;
    top: 15%;
    left: 20%;
    display: flex;
    align-items: center;

    .h_s {
      padding: 0 10px;
      font-family: DIN-Bold;
      font-size: 16px;
      border-right: 2px solid rgba(169, 255, 254, 0.15);
    }

    .day {
      font-size: 14px;
      padding: 0 10px;
      color: #bac3c4;
    }
  }
}

main {
  padding: 5px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 6%);
  box-sizing: border-box;

  #upper,
  #center,
  #bottom {
    width: 100%;
    height: 33%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .item_body {
        height: calc(100% - 35px);
        padding: 10px 15px;
      }
    }

    .scrollBox {
      height: 100%;
      .table_list {
        padding: 16px 0 0 0;
        height: calc(100% - 35px);
        width: 95%;
        margin: auto;
        .list_box {
          text-align: center;

          &.list_title {
            padding: 10px;
            background: url("@/static/img/largeScreen/center-bottom-list-title-bg.png")
              no-repeat;
            background-size: 100%;
            color: #00f4df;
            font-size: 14px;
            height: 40px;
          }

          font-family: SourceHanSansCN-Regular;
          display: grid;
          grid-template-columns: repeat(4, 25%);
          font-size: 12px;

          .num {
            font-family: DIN-Bold;
            color: #28e8ff;
          }
        }
        ::v-deep .swiper {
          height: calc(100% - 40px);
        }
        .box {
          height: 100%;
          .list_box {
            padding: 10px 5px;
            text-align: center;
          }

          .list_box:nth-child(even) {
            background-image: linear-gradient(
              to right,
              rgba(76, 180, 218, 0),
              rgba(76, 180, 218, 0.2),
              rgba(76, 180, 218, 0)
            );
          }
        }
      }
    }
  }

  #upper {
    .left,
    .right {
      width: 25%;
    }

    .left {
      // 库房概况
      .storeroom_probably {
        height: 100%;

        //环境
        .environment {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .environment_item {
            padding: 5px 10px;
            margin: 10px 0;
            background-color: rgba(11, 79, 87, 0.55);
            display: flex;
            justify-content: space-between;
            align-items: center;

            image {
              width: 50px;
              height: 50px;
            }

            .info {
              p {
                font-family: DIN-Bold;
                font-size: 26px;
                color: #23fffc;
              }

              span {
                font-family: SourceHanSansCN-Regular;
                font-size: 14px;
                color: #cee1de;
              }
            }

            view {
              margin: 0 8px;
            }
          }
        }

        // 库房
        .storeroom {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .storeroom_item {
            width: 100%;
            background: url("@/static/img/largeScreen/w-bg.png") no-repeat;
            background-size: 100%;
            display: flex;
            align-items: center;
            padding: 6px 2px;
            margin: 0 0 6px 0;

            image {
              width: 50px;
              height: 50px;
            }

            .info {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-left: 4px;

              .titile {
                font-family: SourceHanSansCN-Regular;
                font-size: 12px;
                color: #ffffff;
                margin-bottom: 5px;
              }

              .data {
                font-family: DIN-Bold;
                font-size: 16px;
                color: #23fffc;
              }
            }
          }
        }
      }
    }

    .center {
      width: 45%;

      //库存走势
      .Inventory {
        padding: 0px 5px;
        position: relative;
        margin: 0 0 4px 0;

        > .bg {
          width: 100%;
          height: 100%;
          top: 40px;
          left: 0;
          position: absolute;
          background: url("@/static/img/largeScreen/w-c-t-bg.png") no-repeat;
          background-size: 100%;
          background-position-y: bottom;
        }

        .sp_box {
          display: flex;
          justify-content: space-between;

          .item {
            display: flex;
            flex-direction: column;
            position: relative;
            align-items: center;

            .msg {
              margin-bottom: 20px;

              p {
                font-family: D-DIN-Bold;
                font-size: 24px;
                color: #23fffc;
                text-align: center;
              }

              span {
                color: #cee1de;
                font-family: SourceHanSansCN-Regular;
                font-size: 16px;
              }
            }

            image {
              width: 53px;
              height: 53px;
            }

            .bg {
              position: absolute;
              width: 103px;
              top: 73px;
            }
          }
        }
      }
    }

    .right {
      //预警信息
      .forewarning {
        height: 100%;
      }
    }
  }

  #center {
    width: 100%;

    .item {
      width: 30%;
    }

    .left {
      //物品数量
      .ItemQuantity {
        .table_list {
          .list_box {
            grid-template-columns: repeat(3, 33%);
          }
        }
      }
    }

    .center {
      //物品待还
      .GoodsReturned {
        .table_list {
          .list_box {
            grid-template-columns: repeat(3, 33%);
          }
        }
      }
    }

    .right {
      //信息通知
      .InfoNotification {
        .table_list {
          .list_box {
            text-align: left;
            grid-template-columns: 17% 56% 28%;
            gap: 10px;
          }

          #box {
            .list_box {
              text-align: left;
              grid-template-columns: 17% 54% 28%;
            }
          }
        }
      }
    }
  }

  #bottom {
    .item {
      width: 48%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .charts-box {
      height: calc(100% - 35px);
      width: 100%;
    }
  }
}
</style>
